import PropTypes from 'prop-types'
import { Tag, Card, Icon, Popover, Skeleton, Spin } from 'antd'
import { Trans } from '@lingui/react'
import { router } from 'utils'
import { stringify } from 'qs'
import React, { PureComponent } from 'react'
import { connect } from 'dva'

const { Meta } = Card

@connect(({ app, loading }) => ({ app, loading }))
// const DeviceLink = ({
//   data, location, app, dispatch
// }) => {
class DeviceLink extends PureComponent {
  render() {
    const { data, location, app, dispatch, loading } = this.props
    const { devicelink } = app
    const target =
      data && data.Imei ? data : devicelink && devicelink.Imei ? devicelink : {}
    const {
      DeviceName,
      Note,
      Belong,
      BelongProject,
      objectId,
      Imei,
      recycled,
    } = target
    const isloading = false //loading.effects['app/devicelink'];
    const OnFetch = visible => {
      if (visible && !Imei) {
        if (dispatch)
          dispatch({ type: 'app/devicelink', payload: { objectId } })
      } else {
        dispatch({ type: 'app/updateState', payload: { objectId } })
      }
    }
    const content = (
      <Card
        style={{
          marginLeft: '-20px',
          marginTop: '-12px',
          marginRight: '-20px',
          marginBottom: '-12px',
        }}
        // cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}
        actions={
          !recycled
            ? [
                <Icon
                  type="link"
                  onClick={e => {
                    router.push({
                      pathname: `/devices/${objectId}`,
                      ...(location
                        ? {
                            search: stringify(location.query, {
                              arrayFormat: 'repeat',
                            }),
                          }
                        : {}),
                    })
                  }}
                />,
              ]
            : []
        }
      >
        <Meta
          title={
            !recycled ? (
              <span>
                <b>
                  <Trans>Device Name</Trans>：
                </b>
                {DeviceName}
              </span>
            ) : (
              <span>
                <Trans>The device has been deleted</Trans>
              </span>
            )
          }
          description={
            <div>
              {Belong && (
                <p>
                  <b>
                    <Trans>Belong：</Trans>
                  </b>
                  {Belong}
                </p>
              )}
              {BelongProject && (
                <p>
                  <b>
                    <Trans>BelongProject：</Trans>
                  </b>
                  {BelongProject}
                </p>
              )}
              {Note && (
                <p>
                  {' '}
                  <b>
                    <Trans>Note：</Trans>
                  </b>
                  {Note}
                </p>
              )}
            </div>
          }
        />
      </Card>
    )
    return (
      <Popover
        placement="bottomRight"
        content={<Spin spinning={isloading}>{content}</Spin>}
        arrowPointAtCenter
        onVisibleChange={OnFetch}
      >
        <Tag color={recycled ? 'gray' : 'cyan'} style={{ marginLeft: '5px' }}>
          {<Icon type="box-plot" />} &nbsp;{DeviceName}
        </Tag>
      </Popover>
    )
  }
}

DeviceLink.propTypes = {
  data: PropTypes.object,
}

export default DeviceLink
